<template>
	<view class="app-container">
		<z-paging ref="paging" safe-area-inset-bottom v-model="dataList" :refresher-enabled="false"
			:loading-more-enabled="false" :auto="false">
			<u-navbar slot="top" title="标的详情" :autoBack="true" leftIconColor="#fff" placeholder bgColor="#cf141a"
				:titleStyle="{ color: '#fff' }"></u-navbar>
			<u-swiper :list="form.imgs" :autoplay="false" circular indicator height="480rpx"></u-swiper>
			<view class="count-item flex flex-align-center"
				:class="form.status === '1' ? 'error' : form.status === '0' ? 'succeed' : 'finish'"
				v-if="form.status === '1' || form.status === '0'">
				<u--text :text="form.status === '0' ? '开拍时间：' : '结束时间：'" block align="left" color="#ffffff"
					size="24rpx"></u--text>
				<liu-countdown ref="countdown" :showSeconds="true" mode="2" :endDate="form.countdown_time"
					:auto="true"></liu-countdown>
			</view>
			<u--text :text="form.title" bold block color="#000000" size="32rpx" margin="25rpx 26rpx 20rpx"></u--text>
			<view class="page-price-item flex flex-align-center">
				<view class="item flex">
					<u--text text="起拍价" block align="left" color="#5c5c5c" size="28rpx"></u--text>
					<u--text :text="form.start_price" bold block align="left" color="#cf141a" size="36rpx"
						margin="0 10rpx 0"></u--text>
				</view>
				<view class="item flex">
					<u--text text="评估价" block align="left" color="#5c5c5c" size="28rpx"></u--text>
					<u--text :text="form.evaluate_price" block align="left" color="#000000" size="36rpx"
						margin="0 10rpx 0"></u--text>
				</view>
			</view>
			<view class="label-item flex">
				<view class="item" v-if="form.structure !== '0'">
					<u--text :text="form.structure" block bold align="left" color="#000000" size="36rpx"></u--text>
					<u--text text="户型" block align="left" color="#5c5c5c" size="28rpx" margin="10rpx 0 0"></u--text>
				</view>
				<view class="item" v-if="form.direction !== '0'">
					<u--text :text="form.direction" block bold align="left" color="#000000" size="36rpx"></u--text>
					<u--text text="朝向" block align="left" color="#5c5c5c" size="28rpx" margin="10rpx 0 0"></u--text>
				</view>
				<view class="item" v-if="form.square !== '0'">
					<u--text :text="form.square" block bold align="left" color="#000000" size="36rpx"></u--text>
					<u--text text="面积" block align="left" color="#5c5c5c" size="28rpx" margin="10rpx 0 0"></u--text>
				</view>
			</view>
			<view class="details-item">
				<view class="item flex">
					<u--text :text="'区域:' + form.county" block align="left" color="#000000" size="28rpx"></u--text>
					<u--text :text="'小区: ' + form.xiaoqu" block align="left" color="#000000" size="28rpx"></u--text>
				</view>
				<view class="item flex">
					<u--text :text="'性质: ' + form.name" block align="left" color="#000000" size="28rpx"></u--text>
					<u--text :text="form.status === '1' ? '状态: 正在拍卖' : form.status === '0' ? '状态: 即将开拍' : '状态: 拍卖结束'"
						block align="left" color="#000000" size="28rpx"></u--text>
				</view>
				<view class="item flex">
					<u--text v-if="form.baozhengjin !== '0'" :text="'保证金:  ¥' + form.baozhengjin" block align="left"
						color="#000000" size="28rpx"></u--text>
					<u--text :text="'加价幅度：¥ ' + form.jiajiafudu" block align="left" color="#000000"
						size="28rpx"></u--text>
				</view>
				<view class="item flex">
					<u--text :text="'延时: ' + form.zhouqi" block align="left" color="#000000" size="28rpx"></u--text>
					<u--text :text="'优先购买：' + form.youxian" block align="left" color="#000000" size="28rpx"></u--text>
				</view>
			</view>
			<u-cell-group>
				<u-cell title="处置机构：" :value="form.chuzhijigou"></u-cell>
				<u-cell title="联系人：" :value="form.consult_name"></u-cell>
				<u-cell title="联系电话：" :value="form.consult_tel"></u-cell>
				<u-cell title="标的物地址：" :value="form.biaodi_address"></u-cell>
			</u-cell-group>
			<map style="width: 100%; height: 200rpx; margin-top: 20rpx" :latitude="form.latitude"
				:longitude="form.longitude" v-if="form.latitude !== '' || form.longitude !== ''" :markers="[
				{
					customCallout: { anchorY: 0, anchorX: 0, display: 'ALWAYS' },
					id: parseFloat(form.id),
					latitude: form.latitude,
					longitude: form.longitude,
					width: 18,
					height: 18,
					iconPath: 'https://huipaifang.nlhykj.com/address/address-icon.png'
				}
			]">
				<cover-view slot="callout" class="customCallout" :marker-id="parseFloat(form.id)">
					<cover-view class="content">
						{{ form.address }}
					</cover-view>
				</cover-view>
			</map>
			<view class="introduce-item">
				<view class="_title flex flex-align-center">标的物介绍</view>
				<view style="margin: 0 20rpx;">
					<u-parse :content="form.biaodi_detail_content"></u-parse>
				</view>
			</view>
			<view class="nearby-item">
				<view class="_title flex flex-align-center">附近标的物</view>
				<view class="goods-list">
					<view class="list-item" v-for="(item, index) in form.fujin" :key="index"
						@click="$toPath.goPage('pages/listings/details', { id: item.id })">
						<view class="list-info flex">
							<u--image :showLoading="true" :src="item.img" width="246rpx" height="230rpx"></u--image>
							<view class="info">
								<u--text :text="item.title" :lines="2" block color="#000000" size="28rpx"></u--text>
								<view class="label flex">
									<u--text v-if="item.square !== '0'" :text="item.square" block align="left"
										color="#717171" size="28rpx"></u--text>
									<u--text v-if="item.structure !== '0'" :text="item.structure" block align="left"
										color="#717171" size="28rpx"></u--text>
								</view>
								<view class="price-item">
									<view class="item flex">
										<u--text text="起拍价" block align="left" color="#6e6e6e" size="24rpx"></u--text>
										<u--text :text="item.start_price" block align="left" color="#cf141a"
											size="28rpx" margin="0 10rpx 0"></u--text>
									</view>
									<view class="item flex">
										<u--text text="评估价" block align="left" color="#6e6e6e" size="24rpx"></u--text>
										<u--text :text="item.evaluate_price" block align="left" color="#cf141a"
											size="28rpx" margin="0 10rpx 0"></u--text>
									</view>
								</view>
							</view>
						</view>
						<view class="list-mode flex flex-between flex-align-center">
							<view class="list-count-item flex">
								<block v-if="item.status === '1' || item.status === '0'">
									<u--text :text="item.status === '0' ? '开拍时间：' : '结束时间：'" block align="left"
										color="#606060" size="26rpx"></u--text>
									<liu-countdown ref="countdown" :showSeconds="true" mode="2"
										:endDate="item.countdown_time" :auto="true"></liu-countdown>
								</block>
							</view>
							<view class="status flex flex-align-center flex-justify-center"
								:class="item.status === '1' ? 'error' : item.status === '0' ? 'succeed' : 'finish'">
								{{ item.status === '1' ? '正在拍卖' : item.status === '0' ? '即将开拍' : '拍卖结束' }}
							</view>
						</view>
					</view>
					<u-loadmore status="nomore" />
				</view>
			</view>
			<view class="btn-fixed flex" slot="bottom">
				<view class="collect flex flex-align-center flex-justify-center" @click="apiHouseCollect">
					<u-icon :name="form.is_collect === 0 ? 'star' : 'star-fill'" color="#c71622" size="28"></u-icon>
					<u--text :text="form.is_collect === 0 ? '收 藏' : '已 收 藏'" block color="#c71622" size="24rpx"
						margin="5rpx 0 0"></u--text>
				</view>
				<view class="btn flex flex-align-center flex-justify-center" style="background: #030303"
					@click="browseClick">
					<u-icon name="attach" color="#ffffff" size="28"></u-icon>
					<u--text text="复制链接" block color="#ffffff" size="27rpx" margin="0 30rpx 0"></u--text>
				</view>
				<view class="btn flex flex-align-center flex-justify-center" style="background: #c71622">
					<u-icon name="server-fill" color="#ffffff" size="28"></u-icon>
					<u--text text="免费普拍" block color="#ffffff" size="27rpx" margin="0 30rpx 0"></u--text>
					<u-button type="warning" openType="contact" text="免费普拍"></u-button>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				form: {},
				dataList: []
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.apiHouseDetail();
		},
		methods: {
			browseClick() {
				uni.setClipboardData({
					data: this.form.tag_id,
					success: res => {
						this.$toPath.showToast('复制成功，请打开浏览器粘贴跳转', 'none')
					}
				});
			},
			apiHouseDetail() {
				this.$api.apiHouseDetail({
					uid: uni.getStorageSync('uid'),
					id: this.id
				}).then((res) => {
					this.form = res.house_list;
				});
			},
			apiHouseCollect() {
				this.$api.apiHouseCollect({
					uid: uni.getStorageSync('uid'),
					house_id: this.form.id
				}).then(res => {
					this.$toPath.showToast(res.err, 'none')
					this.apiHouseDetail()
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.app-container {
		/deep/ .u-text {
			flex: none;
			width: auto;
		}

		.count-item {
			height: 70rpx;
			padding: 0 44rpx;

			&.error {
				background: #cf141a;
			}

			&.succeed {
				background: #569826;
			}

			&.finish {
				background: #6d6d6d;
			}

			/deep/ .count-down {
				font-size: 24rpx;
				color: #fff;
			}
		}

		.page-price-item {
			margin: 0 26rpx;
			padding: 25rpx 0 0;
			border-top: solid 3rpx #c6c6c6;
			box-sizing: border-box;

			.item {
				margin-left: 40rpx;

				&:first-child {
					margin-left: 0;
				}
			}
		}

		.label-item {
			margin: 30rpx 26rpx 0;

			.item {
				flex: 1;
				flex-direction: column;
			}
		}

		.details-item {
			margin: 40rpx 16rpx;

			.item {
				margin-top: 25rpx;

				&:first-child {
					margin-top: 0;
				}

				/deep/ .u-text {
					flex: 1;
				}
			}
		}

		.customCallout {
			background: #cf141a;
			background-color: #cf141a;
			padding: 10rpx;
			border-radius: 10rpx;

			.content {
				margin-top: 10rpx;
				color: #fff;
				font-size: 26rpx;

				&:first-child {
					margin-top: 0;
				}
			}
		}

		._title {
			height: 104upx;
			font-size: 32upx;
			color: #333333;
			position: relative;
			padding-left: 18upx;
			font-weight: bold;
			margin: 0 20rpx 0;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				width: 8upx;
				height: 32upx;
				top: 50%;
				margin-top: -16upx;
				background: #cf141a;
			}
		}

		.goods-list {
			padding-bottom: 130rpx;
		}

		.btn-fixed {
			border-top: solid 3rpx #d3d3d3;
			box-sizing: border-box;
			background: #fff;

			.collect {
				flex: 1;
				flex-direction: column;
			}

			.btn {
				flex: 2;
				position: relative;

				/deep/ .u-button {
					position: absolute;
					opacity: 0;
				}
			}
		}
	}
</style>